import React from 'react';
import { Row, Col, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { getChildrenToRender, LogButton } from './utils';

class ReadCard extends React.Component {
  getBlockChildren = (data) =>
    data.map(($item) => {
      const { ...item } = $item;
      const { title, img, content } = item;
      ['title', 'img', 'content'].forEach((key) => delete item[key]);

      const buttonObj = { ...(content?.children ?? {}) };

      const { isLogButton } = buttonObj;
      let buttonNode = null;
      if (!!isLogButton) {
        buttonNode = React.createElement(LogButton, { ...buttonObj.children });
      }
      return (
        <li key={item.name} {...item}>
          <span>
            {typeof img?.children === typeof "string" ?
              (<img src={img.children} className={img.className} width="100%" alt="img" />) :
              img.children
            }
          </span>
          <h2 {...title}>
            {title.children}
            {!!isLogButton && buttonNode && (
              <>
                {buttonNode}
              </>
            )}
          </h2>
          {!isLogButton && (
            <div {...content}>{content.children}</div>
          )}

        </li >
      );
    });

  render() {
    const { ...props } = this.props;
    const { dataSource, isMobile } = props;
    delete props.dataSource;
    delete props.isMobile;
    const ulChildren = this.getBlockChildren(dataSource.block.children);
    const queue = isMobile ? 'bottom' : 'left';
    return (
      <div {...props} {...dataSource.wrapper}>
        <OverPack {...dataSource.OverPack} component={Row}>
          <QueueAnim
            key="text"
            type={queue}
            animConfig={{ translateX: [0, -300] }}
            leaveReverse
            ease={['easeOutQuad', 'easeInQuad']}
            {...dataSource.textWrapper}
            component={Col}
          >
            <div key="title" {...dataSource.titleWrapper}>
              {dataSource.titleWrapper.children.map(getChildrenToRender)}
            </div>
            <QueueAnim
              component="ul"
              key="ul"
              type={queue}
              ease="easeOutQuad"
              {...dataSource.block}
            >
              {ulChildren}
            </QueueAnim>

            <div key='button' className='download_button'>
              <LogButton
                type="primary"
                shape="round"
                className="button"
                softName="readCard.zip"
                text="下载"
              />
            </div>

          </QueueAnim>
          <QueueAnim
            key="img"
            type='right'
            animConfig={{ translateX: [100, 400] }}
            leaveReverse
            ease={['easeOutQuad', 'easeInQuad']}
            {...dataSource.textWrapper}
            component={Col}
          >
            <div key="img2" >
              <img src={dataSource.img.children} className='img-spin' width="100%" alt="img" />
            </div>

          </QueueAnim>
        </OverPack>
      </div>
    );
  }
}

export default ReadCard;
